<template>
  <view class="page-container">
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">员工档案</block>
    </my-header>
    <view class="page-content" :style="{ height: this.ContentArea + 'px' }">
      <view class="page-search">
        <view class="search">
          <view class="search-left">
            <image src="@/static/images/search.png" mode="aspectFit" />
          </view>
          <input
            class="search-center"
            type="text"
            placeholder="输入用户进行搜索"
            placeholder-class="search-placeholder"
            v-model="searchValue"
            @blur="onRefresh"
          />
        </view>
      </view>
      <view class="page-content-main">
        <scroll-view
          class="list"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <view class="scroll-content">
            <uni-swipe-action>
              <view
                class="swipe-action-wrapper"
                v-for="item in dataList"
                :key="item.id"
              >
                <uni-swipe-action-item
                  :right-options="rightOptions"
                  @click="swipeClick(item.id, $event)"
                >
                  <view class="employee-record-item">
                    <image
                      class="employee-record-item-avatar"
                      :src="item.avatar"
                      mode="scaleToFill"
                      lazy-load
                      :draggable="false"
                    />
                    <view class="employee-record-item-content">
                      <view class="employee-record-item-content-title">
                        <text class="realname">{{ item.realname }}</text>
                        <text>{{ item.workNo }}</text>
                      </view>
                      <view class="employee-record-item-tags">
                        <view class="employee-record-item-tag">{{
                          item.jobStatus === "1" ? "试用员工" : "正式员工"
                        }}</view>
                        <view
                          v-if="!!item.departName"
                          class="employee-record-item-tag"
                          >{{ item.departName }}</view
                        >
                        <view
                          v-if="!!item.age"
                          class="employee-record-item-tag employee-record-item-tag-age"
                          >{{ `${item.age}岁` }}</view
                        >
                        <view
                          v-if="!!item.company_dictText"
                          class="employee-record-item-tag"
                          >{{ item.company_dictText }}</view
                        >
                        <view
                          v-if="!!item.classes"
                          class="employee-record-item-tag"
                          >{{ item.classes }}</view
                        >
                        <view
                          v-if="!!item.post"
                          class="employee-record-item-tag"
                          >{{ item.post }}</view
                        >
                      </view>
                    </view>
                  </view>
                  <!--                <template v-slot:right>-->
                  <!--                  <view-->
                  <!--                    style="-->
                  <!--                      position: relative;-->
                  <!--                      margin-left: 20rpx;-->
                  <!--                      background-color: #ffffff;-->
                  <!--                      border-radius: 15px;-->
                  <!--                      padding: 30rpx;-->
                  <!--                      margin-bottom: 26rpx;-->
                  <!--                    "-->
                  <!--                  >-->
                  <!--                    <view-->
                  <!--                      style="-->
                  <!--                        border-radius: 30rpx;-->
                  <!--                        background-color: rgba(69, 145, 254, 1);-->
                  <!--                        padding: 10rpx 30rpx;-->
                  <!--                        margin-bottom: 25rpx;-->
                  <!--                        color: #ffffff;-->
                  <!--                      "-->
                  <!--                    >-->
                  <!--                      详情-->
                  <!--                    </view>-->
                  <!--                    <view-->
                  <!--                      style="-->
                  <!--                        border-radius: 30rpx;-->
                  <!--                        background-color: rgba(220, 31, 31, 1);-->
                  <!--                        padding: 10rpx 30rpx;-->
                  <!--                        margin-bottom: 25rpx;-->
                  <!--                        color: #ffffff;-->
                  <!--                      "-->
                  <!--                    >-->
                  <!--                      删除-->
                  <!--                    </view>-->
                  <!--                  </view>-->
                  <!--                </template>-->
                </uni-swipe-action-item>
              </view>
            </uni-swipe-action>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import configService from "@/common/service/config.service.js";
import myHeader from "../../components/my-header/my-header.vue";

export default {
  components: {
    "my-header": myHeader,
  },
  data() {
    return {
      // ContentArea: 0,
      searchValue: "",
      refreshing: true,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      dataList: [],
      rightOptions: [
        {
          text: "详情",
          style: {
            backgroundColor: "rgba(69, 145, 254, 1)",
          },
        },
      ],
    };
  },
  mounted() {
    this.onRefresh();
  },
  methods: {
    getFileAccessHttpUrl(avatar, subStr) {
      if (!subStr) subStr = "http";
      if (avatar && avatar.startsWith(subStr)) {
        return avatar;
      } else {
        return configService.staticDomainURL + "/" + avatar;
      }
    },
    async getData(pageNo) {
      const Auth_Company_Id = await uni.getStorageSync("Auth_Company_Id");
      const params = {
        pageNo,
        pageSize: this.pageSize,
        company: Auth_Company_Id,
        // column: "createTime",
        // order: "desc",
        // jobStatus: "1,2",
        realname: this.searchValue || "",
      };
      const res = await this.$http.get("/sys/user/list", { params });
      return res?.data?.result || {};
    },
    async onRefresh() {
      this.refreshing = true;
      try {
        const { current, records, total, size } = await this.getData(1);
        this.total = total;
        this.pageNo = current;
        this.pageSize = size;
        this.dataList = records?.map((item) => ({
          ...item,
          avatar: this.getFileAccessHttpUrl(item?.avatar),
        }));
        console.log("this.dataList", this.dataList);
      } catch (e) {
        console.log(e, "🚀 ~ file:index method:onRefresh line:57 -----");
      }
      this.refreshing = false;
    },
    async onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        const { current, records, total, size } = await this.getData(
          this.pageNo + 1
        );
        this.pageNo = current;
        this.total = total;
        this.pageSize = size;
        this.dataList = this.dataList.concat(
          records?.map((item) => ({
            ...item,
            avatar: this.getFileAccessHttpUrl(item?.avatar),
          }))
        );
      }
    },
    swipeClick(id, e) {
      if (e.index === 0) {
        uni.navigateTo({
          url: `/pages/employeeRecord/detail/index?id=${id}`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page-container {
  background: #ffffff;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  padding-top: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.page-content {
  display: flex;
  flex-direction: column;
}

.page-content-main {
  flex: 1;
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
  overflow: hidden;
}

.scroll-content {
  //padding: 0 40rpx;
}

.list {
  height: calc(100%);
  box-sizing: border-box;
  padding-bottom: 16px;
}

.swipe-action-wrapper {
  box-shadow: 0 0 40rpx 0 #d1e4ff;
  margin: 16rpx 40rpx;
  border-radius: 32rpx;
  overflow: hidden;
}

.employee-record-item {
  background: #ffffff;
  border-radius: 12rpx;
  display: flex;
  box-sizing: border-box;
  padding: 16rpx 20rpx;
}

.employee-record-item-avatar {
  width: 130rpx;
  height: 180rpx;
  border-radius: 10rpx;
  margin-right: 28rpx;
}

.employee-record-item-content {
  flex: 1;
}

.employee-record-item-content-title {
  font-family: PingFang TC, PingFang TC;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
  line-height: 28rpx;

  .realname {
    margin-right: 22rpx;
  }
}

.employee-record-item-tags {
  margin-top: 36rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 24rpx;
  gap: 22rpx 16rpx;

  .employee-record-item-tag {
    box-sizing: border-box;
    padding: 10rpx 12rpx;
    background: rgba(52, 166, 89, 0.16);
    border-radius: 40rpx;
    color: #34a659;

    &-age {
      color: #fe7a30;
      background: rgba(255, 173, 4, 0.15);
    }
  }
}
</style>
